<template>
	<div class="mess">
		<section class="opinion">
        	<div class="txt">如果您对好房排行有好的建议，请留言发给我们，感谢您对好房排行的支持。</div>
            <div id="messageBox" contenteditable="true" class="textarea"></div>
            <div contenteditable="true" id="message" name="message" class="textarea" style="display:none"></div>
            <div class="opinion-entrust noAdd bb8">
                <h4><span class="num">0/3</span>图片（选填，提供问题截图）</h4>
	            <div class="comment-addpic" style="display: inline-block;"> 
	            	<dl>
	            		<dd id="file_0">
	            			<img src="" class="imgClass">
	            			<span class="del mui-icon mui-icon-closeempty">
	            				
	            			</span>
	            		</dd>
	            		<dd class="add">
	            			<input type="file" name="pic0" id="pic0" accept="image/*" class="upload-input" multiple="multiple">
	            		</dd>
	            	</dl>
	            </div>
            </div>
            <div class="input-box mt14">
                <span class="mui-icon mui-icon-close"></span>
                <input id="phone" name="phone" type="text" maxlength="11" placeholder="请留下您的手机号">
            </div>
    	</section>
    	<div class="mt20"><a class="opinion-btn red_df3 btnblu">确 定</a></div>
	</div>
</template>

<script>
</script>

<style>
	.mess {
	    position: relative;
	    margin: 0 auto;
	    max-width: 640px;
	    min-height: 100%;
	    overflow: hidden;
	}
	.opinion {
	    padding: 14px;
	}
	.opinion .txt {
	    margin-bottom: 15px;
	    font-size: 14px;
	    color: #83868f;
	    line-height: 22px;
	}
	.opinion .textarea {
	    padding: 8px;
	    font-size: 14px;
	    line-height: 22px;
	    min-height: 120px;
	    overflow-y: auto;
	    color: #0c0d0e;
	    width: 100%;
	    border: 1px solid #f4f4f4;
	    border-radius: 2px;
	    outline: none;
	}
	.opinion-entrust {
	    overflow: hidden;
	}
	.opinion-entrust h4 {
	    color: #3c3f46;
	    font-size: 14px;
	    line-height: 16px;
	    padding: 12px 0;
	}
	.opinion-entrust h4 .num {
	    float: right;
	    font-size: 12px;
	    color: #e5e7ed;
	}
	.opinion-entrust dl {
	    margin: 0 auto;
	}
	.opinion-entrust dd {
		margin: 0;
	    float: left;
	    width: 50px;
	    height: 50px;
	    border: 1px solid #f8f8f8;
	    background: url(../assets/images/pic_add_bg.jpg) center no-repeat;
	    background-size: 50px auto;
	    position: relative;
	    margin-right: 12px;
	    z-index: 2;
	}
	.opinion-entrust dd img {
	    width: 100%;
	    height: 100%;
	}
	.opinion-entrust dd .del {
	    /*background: url(../images/close_wt2.png) no-repeat;*/
	    /*background-size: 18px;*/
	   background-color: #df3031;
	   color: #fff;
	   font-size: 20px;
	    position: absolute;
	    top: -7px;
	    right: -7px;
	    border-radius: 50%;
	    overflow: hidden;
	    z-index: 8;
	}
	.opinion-entrust dd .upload-input {
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    position: absolute;
	}
	.opinion .input-box {
	    position: relative;
	    padding-right: 25px;
	    height: 38px;
	    font-size: 15px;
	    color: #b3b6be;
	    border: 1px solid #f4f4f4;
	    border-radius: 2px;
	}
	.opinion .input-box span {
	    position: absolute;
	    top: 50%;
	    right: 5px;
	    margin-top: -10px;
	    width: 20px;
	    height: 20px;
	    font-size: 20px;
	}
	.opinion .input-box input {
	    padding-left: 9px;
	    width: 100%;
	    height: 36px;
	    font-size: 14px;
	    border: none;
	    color: #0c0d0e;
	    outline: none;
	}
	.mt20 {
	    margin-top: 20px !important;
	}
	.opinion-btn {
	    display: block;
	    margin: 0 14px;
	    font-size: 14px;
	    line-height: 40px;
	    text-align: center;
	    color: #cccfd8;
	    background-color: #f1f1f2;
	    border-radius: 2px;
	}
	.opinion-btn.red_df3 {
	    color: #fff;
	    background-color: #df3031;
	}
</style>